'use client';

import { useEffect } from 'react';
import { onCLS, onINP, onFCP, onLCP, onTTFB } from 'web-vitals';

/**
 * Web Vitals 性能监控组件
 */
export function PerformanceMonitor() {
  useEffect(() => {
    // 监控核心 Web Vitals 指标
    onCLS(console.log);
    onINP(console.log);
    onFCP(console.log);
    onLCP(console.log);
    onTTFB(console.log);
  }, []);

  return null;
}

/**
 * 发送性能指标到分析服务
 */
function sendToAnalytics(metric: unknown) {
  // 这里可以发送到 Google Analytics, Vercel Analytics 等
  console.log('Performance metric:', metric);
}

/**
 * 带分析的性能监控组件
 */
export function PerformanceMonitorWithAnalytics() {
  useEffect(() => {
    onCLS(sendToAnalytics);
    onINP(sendToAnalytics);
    onFCP(sendToAnalytics);
    onLCP(sendToAnalytics);
    onTTFB(sendToAnalytics);
  }, []);

  return null;
}
